<template>
	<view>
		<drag-box
		:pos_x="pos_x"
		:pos_y="pos_y" 
		:start_scale="start_scale" 
		:opa="opa" 
		:drag_able="drag_able"
		:stop_here="stop_here"
		@locationChanged="locationChanged"
		@scaleChanged="scaleChanged"
		>
			<view class="time-box">
				<view class="time-img"><image style="width: 100%; height: 100%;" src="../../static/time.png" /></view>
				<view class="time-title">倒计时</view>
				<view class="time-txt">00:26</view>
			</view>
		</drag-box>
	</view>
</template>

<script>
	
	import dragBox from '@/components/drag-box/drag-box.vue'
	
	export default {
		components: {
			dragBox,
		},
		props: {
			pos_x: { type: Number, default: 0 },
			pos_y: { type: Number, default: 0 },
			start_scale: { type: Number, default: 1 },
			opa: { type: Number, default: 1 },
			drag_able: { type: Boolean, default: true},
			stop_here: { type: Boolean, default: false},
			space: {
				type: Number,
				default: 50
			},
			cpt_id: {
				type: Number,
				default: 0
			},
			example: {
				type: Boolean,
				default: false
			}
		},
		name:"countdown",
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>

	.time-box {
		width: 160px;
		height: 116px;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 0px 4px rgba(255, 255, 255, 1);
	}
	
	.time-img {
		position: absolute;
		left:-23px;
		top:-23px;
		width: 63px;
		height: 65px;
	}
	
	.time-title {
		font-size: 22px;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
	}
	
	.time-txt {
		font-size: 40px;
		color: #ffea66;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
		line-height: 1.3;
	}
</style>